<template>
  <div>
     <detail-header></detail-header>
     <detail-swiper :swiperList="swiperList"></detail-swiper>
     <detail-map></detail-map>
     
     <router-view
      :galaryList="galaryList"
      :imgList="imgList"
      :addressList="addressList"
     ></router-view>
  </div>
</template>

<script>
import axios from 'axios'
import detailHeader from './components/detailHeader'
import detailSwiper from './components/detailSwiper'
import detailMap from './components/datailMap'
export default {
  name: 'Detail',
  components:{
      detailHeader,
      detailSwiper,
      detailMap
  },
  data () {
    return {
         swiperList:[],
         imgList:[],
         galaryList:[],
         addressList:[]
    }
  },
   methods:{
        getDetailData(){   //请求的地址
          axios.get("/api/detail.json?id="+this.$route.params.id)
               .then(this.getDetailDataSuss)   //请求成功函数
    },
        getDetailDataSuss(res){   
         console.log(res)   //将数据尝试打印出来
          res = res.data   //先将请求来的数据保存一下
          if(res.data){   //判断是否有数据,如果有
              const data = res.data   //因为是两层的data,所以需要保留两次
              this.swiperList = data.swiperList
              this.imgList = data.imgList
              this.galaryList = data.galaryList
              this.addressList = data.addressList
       }
    }
  },
  mounted(){
     this.getDetailData()
  }
}
</script>

<style lang="stylus"  scoped>

</style>